import { useEffect } from "react"
import * as echarts from 'echarts'

export default () => {
    useEffect(() => {
        // 1.根据容器初始化实例
        const chart = echarts.init(document.getElementById('main'))

        // 2.准备配置
        let options = {
            color: ['gold', 'pink'],
            backgroundColor: 'rgb(255,255,255)',
            tooltip: {
                show: true
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: { readOnly: false },
                    magicType: { type: ['line', 'bar'] },
                    restore: {},
                    saveAsImage: {}
                }
            },
            title: {
                text: "2023年中国汽车销售数据"
            },
            xAxis: {
                data: ['大众', '奥迪', '起亚', '福特', '菲亚特']
            },
            yAxis: {

            },
            series: [
                {
                    type: "bar",
                    data: [110, 300, 200, 180, 280],
                    showBackground: true,
                    name: "2022",
                    backgroundStyle: {
                        // color: 'rgba(180, 180, 180, 1)'
                    }
                },
                {
                    type: "bar",
                    data: [220, 180, 260, 280, 220],
                    showBackground: true,
                    name: "2023",
                    backgroundStyle: {
                        // color: 'rgba(180, 180, 180, 1)'
                    }
                },
                {
                    type: "bar",
                    data: [120, 380, 160, 260, 320],
                    showBackground: true,
                    name: "2023",
                    backgroundStyle: {
                        // color: 'rgba(180, 180, 180, 1)'
                    }
                }
            ],
            legend: {
                top: "50%",
                left: "90%",
                orient: "vertical"
            }
        }

        // 3.设置配置
        chart.setOption(options)

        // 4.实现响应式
        window.addEventListener('resize', () => chart.resize())
    }, [])

    return (
        <div>
            <div id="main" style={{ width: '100%', height: '300px' }}></div>
        </div>
    )
}